<div id="gallery" ng-cloak
     ng-class="'current_theme_' + Color.light_or_dark(Color.parse(Theme.bg.color))"
     ng-style="{ 'background-color': Color.parse(Theme.bg.color), 'color': Color.parse(Theme.fg.color) }">

  <div class="titlebar" ng-class="{ 'slide' : Editor.Gallery.visible }" ng-cloak>
    <div class="actions">
      <a href="https://github.com/aziz/tmTheme-Editor/wiki/How-to-add-your-own-theme-to-the-gallery%3F"
         target="_blank" class="add"
         data-placement="bottom"
         data-container="body"
         bs-tooltip="{ title: 'Add your own theme to the gallery'}">
         <i class="icon-plus"></i>
      </a>
      <a ng-click="toggle_gallery_type_filter('dark')"
         ng-class="{'active': gallery_filter.color_type == 'dark'}"
         class="dark_filter">Dark</a>
      <a ng-click="toggle_gallery_type_filter('light')"
         ng-class="{'active': gallery_filter.color_type == 'light' }"
         class="light_filter">Light</a>
    </div>
  </div>

  <div class="scrollbox" ng-class="{ 'slide' : Editor.Gallery.visible }"
       ng-style="{ 'background-color': Color.parse(Theme.bg.color), 'color': Color.parse(Theme.fg.color) }">
    <div style="overflow-y: scroll; height: 100%">
      <div class="local_themes_list" ng-if="local_themes.length > 0">
        <h5>
          <span class="theme_count pull-right">{{ filtered_local.length }}</span>
          Local Files
        </h5>
        <ul>
          <li ng-repeat="theme in filtered_local=(local_themes | orderBy:'name' | filter: gallery_filter)"
              ng-class="{ 'selected': theme.name == selected_theme }">
              <a ng-href="/#!/editor/local/{{::theme.name}}">
                <span class="{{::theme.color_type}}_theme_icon"></span>
                <span class="theme_title">{{ ::theme.name | removeExtension }}</span>
              </a>
              <span ng-click="remove_local_theme(theme)" class="remove_theme" title="Remove">&times;</span>
          </li>
        </ul>
      </div>

      <div class="external_theme_list local_themes_list" ng-if="external_themes.length > 0">
        <h5>
          <span class="theme_count pull-right">{{ filtered_external.length }}</span>
          External URLs
        </h5>
        <ul>
          <li ng-repeat="theme in filtered_external=(external_themes | orderBy:'name' | filter: gallery_filter)"
              ng-class="{ 'selected': theme.name == selected_theme }">
            <a ng-href="/#!/editor/url/{{::theme.url}}">
              <span class="{{::theme.color_type}}_theme_icon"></span>
              <span class="theme_title">{{ ::theme.name | removeExtension }}</span>
            </a>
            <span ng-click="remove_external_theme(theme)" class="remove_theme" title="Remove">&times;</span>
          </li>
        </ul>
      </div>

      <div class="gallery_themes_list">
        <h5>
          <span class="theme_count pull-right">{{filtered_gallery.length}}</span>
          Gallery
        </h5>
        <ul ng-bind-html="themes"></ul>
      </div>
    </div>
  </div>
  <div ng-class="{ 'slide' : Editor.Gallery.visible }" class="searchbar">
    <input type="search" ng-model="gallery_filter.name" placeholder="Search Gallery">
    <div ng-if="gallery_filter.name" ng-click="gallery_filter.name = ''" class="clear_search">
      <i class="icon-cancel-circle"></i>
    </div>
  </div>
</div>
